<template>
  <!-- v-pagePermissions="pagePermissions"  -->
  <div class="white-bg commonBoxmp">
    <el-scrollbar class="HeightAuto">
      <DocumentEditor
        id="docEditor"
        documentServerUrl="http://10.0.0.20/"
        :config="state.config"
        :events_onDocumentReady="onDocumentReady"
      />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, shallowRef, onMounted, onBeforeUnmount } from "vue";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

/*
Setup
×
JWT is enabled by default.A random secret is generated automatically.
The secret is available in
%ProgramFiles%6\ONLYOFFICE\DocumentServer\config\localjson, inservices.CoAuthoring.secret.inbox.string parameter.
确定

user onlyoffice pwds onlyoffice host 10.0.0.58 localhost
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const mode = ref("default");
const state = reactive({
  config: {
    document: {
      fileType: "docx",
      key: "my_jwt_secret",
      title: "Example Document Title.docx",
      url: "http://10.0.0.20/url-to-example-document.docx",
    },
    documentType: "word",
    editorConfig: {
      callbackUrl: "http://10.0.0.20/url-to-callback.ashx",
    },
    token:
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCIsImVkaXRvckNvbmZpZyI6eyJ1c2VyIjp7ImlkIjoiRjg5ZDgwNjliYTJiIiwibmFtZSI6IkthdGUgQ2FnZSJ9fX0.rdmhKLzXwXXVTABioKy3R2-HGMBY5u4pbZ_TVhW2rJs",
  },
});
const onDocumentReady = () => {};

// 模拟 ajax 异步获取内容
onMounted(() => {});
</script>

<style scoped lang="scss"></style>
